.login {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(~assets/login.png);

    .loginContainer {
      width: 440px;
      height: 360px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    // 1. 根元素仍旧接受重命名为hash, 为了让父元素的类名唯一
  :global{
    // 2. 根元素下的类名，全部使用global包起来，为了写法更接近以前
    .login-container {
      width: 440px;
      height: 360px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    .login-logo {
      width: 200px;
      height: 60px;
      display: block;
      margin: 0 auto 20px;
    }

    .color{
      color:green
    }
  }
  // :global{} 作用：避免类名被重命名为hash
  }
  